<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./echarts.js"></script>
</head>

<body>
    <div id="xq" style="width: 500px; height: 350px;">

    </div>
</body>
<script>
    var myEcharts = echarts.init(document.getElementById('xq'))
    var option = {
        legend: {
            data: ['C2109A班', 'C2109B班', 'C2109C班']
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
        {
                type: 'value',
              
            }
        ],
        yAxis: [
          
            {
                type: 'category',
                data: ['2109C班'],
                name:'就业率'
            }
        ],
        series: [
            {
                name: 'C2109A班',
                type: 'bar',
                barGap: 0,
                data: [10, 20, 30, 40, 50, 60, 100]
            },
            {
                name: 'C2109B班',
                type: 'bar',
                data: [10, 20, 30, 50, 60, 100, 300]
            },
            {
                name: 'C2109C班',
                type: 'bar',
                data: [10, 50, 100, 200, 350, 450, 500]
            },

        ]
    };

    option && myEcharts.setOption(option);

</script>
</body>

</html>